<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
    </style>

    <script>

        // 使用函数进行封装,使得复用性更高
		
		// 使用函数封装带来的问题
		// 1.全局变量污染
		// 2.代码结构不够清晰,不便于维护

		// 使用对象进行封装后的优势
		// 1.暴露在全局的只有一个对象名 不会造成全局变量污染
		// 2.适用对象将代码进行功能模块的划分,有利于日后的维护
		
		window.onload = function () {
			var divs = itcastQuery.getELe.tag("div");
			itcastQuery.setCss.setStyle(divs);
			
			var ps = itcastQuery.getELe.tag("p");
			itcastQuery.setCss.setStyle(ps);
		}
		
		
		var itcastQuery = {
			// 获取dom元素的方法们
			getELe: {
				tag: function (tagName) {
					return getElementsByTagName(tagName);
				},
				id: function (id) {
					return getElementById(id);
				}
				// 通过classname获取元素的方法
				// ......
			},
			setCss: {
				setStyle: function (elements) {
					for (var j = 0; j < elements.length; j++) {
						var ele = elements[j];
						ele.style.border = "1px solid red";
					}
				},
				css:function (option) {},
				addClass:function(){},
				// ..
			}
			// 事件处理模块
			
			
			
		}
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>

<p>我是第1个p元素</p>
<p>我是第2个p元素</p>
<p>我是第3个p元素</p>
</body>
</html>